import { Tabbar } from '@nutui/nutui-react-taro';
import { IconFont } from '@nutui/icons-react-taro';
import { View } from '@tarojs/components';

import './index.less';

const pageMap = [
  {
    title: '创作',
    icon: (
      <IconFont
        size={22}
        fontClassName="icon"
        classPrefix="go-farm"
        name="idea"
      />
    ),
  },
  {
    title: '提取纪录',
    icon: (
      <IconFont
        size={22}
        fontClassName="icon"
        classPrefix="go-farm"
        name="book"
      />
    ),
  },
];

interface IProps {
  value?: number;
  onChange?: (index: number) => void;
}

export default function Index(props: IProps) {
  return (
    <View className="dou-bottom">
      <Tabbar value={props.value} onSwitch={props.onChange} fixed>
        {pageMap.map((item, index) => (
          <Tabbar.Item key={index} title={item.title} icon={item.icon} />
        ))}
      </Tabbar>
    </View>
  );
}
